<script setup>
import { ref,markRaw, computed  } from 'vue'
import { deleteTableRow } from '../../../../utils/utils';
import ConfigMapRef from './envFromType/ConfigMapRef.vue'
import SecretRef from './envFromType/SecretRef.vue'
const props = defineProps({
    env: {
        type: Array
    },
    envFrom: {
        type: Array
    },
    containerIndex: {
        type: Number,
    }
})

const activeName = ref('env')
const showAddEnvFromDialog = ref(false)
const envFromResourceType = ref('ConfigMap')
const envFromResourceTypeComp = {
        'ConfigMap': markRaw(ConfigMapRef),
        'Secret': markRaw(SecretRef),
    }
const addEnv = ()=>{
    const env = {
        name: '',
        value: '',
    }
    if (props.env == null || props.env == undefined) {props.env = []}
    props.env.unshift(env)
}
const addEnvFrom = ()=>{
    showAddEnvFromDialog.value = true
}

const getKey = computed(() => (index)=>{
    
    return new Date().getTime()
})
</script>

<template>
  <el-tabs v-model="activeName" class="demo-tabs">
    <el-tab-pane label="逐个配置" name="env">
        <el-table
            border
            :data="props.env"
            height="300px"
            >
                <el-table-column align="center" prop="name" label="变量名" width="480">
                    <template #default="scope">
                        <el-form-item label-width="0" style="margin-bottom: 0px;">
                            <el-input v-model.trim="scope.row.name" placeholder="变量名"></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="value" label="变量值">
                    <template #default="scope">
                        <el-form-item v-if="scope.row.hasOwnProperty('value')" label-width="0"  style="margin-bottom: 0px;">
                            <el-input  style="width: 100%;" v-model.trim="scope.row.value" placeholder="变量值" />
                        </el-form-item>
                        <span v-else>不支持修改该类型变量的值</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="" label="添加" width="140">
                    <template #header>
                        <el-button link type="primary" @click="addEnv()">
                            添加
                        </el-button>
                    </template>
                    <template #default="scope">
                        <el-button link type="warning" @click="deleteTableRow(scope.$index)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
        </el-table>
    </el-tab-pane>
    <el-tab-pane label="批量生成" name="envFrom">
        <el-table
            border
            :data="props.envFrom"
            height="300px"
            >
                <el-table-column align="center" prop="prefix" title="变量前缀可以给每个生产的变量加一个前缀" label="变量前缀" width="360">
                    <template #default="scope">
                        <el-form-item label-width="0" style="margin-bottom: 0px;">
                            <el-input v-model.trim="scope.row.prefix" placeholder="变量前缀"></el-input>
                        </el-form-item>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="type" label="类型" width="140">
                    <template #default="scope">
                        <span>{{ scope.row.configMapRef?'ConfigMap':'Secret' }}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="config" label="变量配置" >
                    <template #default="scope">
                        <component 
                        :is="envFromResourceTypeComp[scope.row.configMapRef?'ConfigMap':'Secret']"
                        :env-from="props.envFrom"
                        :env-from-item="scope.row"
                        :key="Math.random()"
                        method="Update"
                        ></component>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="" label="添加" width="140">
                    <template #header>
                        <el-button link type="primary" @click="addEnvFrom()">
                            添加
                        </el-button>
                    </template>
                    <template #default="scope">
                        <el-button link type="warning" @click="deleteTableRow(props.envFrom, scope.$index)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
        </el-table>
        <el-dialog v-model="showAddEnvFromDialog" :title="('使用'+envFromResourceType+'生成环境变量')" center destory-on-close>
            <el-card>
                <template #header>
                    <div class="card-header">
                        <div>
                            <el-radio-group v-model="envFromResourceType" class="ml-4">
                                <el-radio label="ConfigMap" size="large">ConfigMap</el-radio>
                                <el-radio label="Secret" size="large">Secret</el-radio>
                            </el-radio-group>
                        </div>
                    </div>
                </template>
                <component 
                :is="envFromResourceTypeComp[envFromResourceType]"
                :env-from="props.envFrom"
                @closeDialog="()=>{showAddEnvFromDialog=false}"
                ></component>
            </el-card>
        </el-dialog>
    </el-tab-pane>

  </el-tabs>
</template>

<style scoped>

</style>
